<template lang="html">
  <div class="fffff">
      <el-date-picker v-if="startEndTime" v-model="date" type="daterange" @change="onDate" value-format="yyyy-MM-dd"
      range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      <div class="buttons">
          <el-button size="small" @click="filter(0)" :class="[active==0?'active':'']" type="primary" plain>总计</el-button>
      </div>
      <div class="buttons">
          <el-button size="small" @click="filter(1)" :class="[active==1?'active':'']" type="primary" plain>日</el-button>
          <el-date-picker class="date_picker" value-format="yyyy-MM-dd"
          ref="date_picker_day" @change="onDay" v-model="day" type="date"></el-date-picker>
      </div>
      <div class="buttons">
          <el-button size="small" @click="filter(2)" :class="[active==2?'active':'']" type="primary" plain>月</el-button>
          <el-date-picker class="date_picker" value-format="yyyy-MM"
          ref="date_picker_month" @change="onMonth" v-model="month" type="month"></el-date-picker>
      </div>
      <div class="buttons">
          <el-button size="small" @click="filter(3)" :class="[active==3?'active':'']" type="primary" plain>年</el-button>
          <el-date-picker class="date_picker" value-format="yyyy"
          ref="date_picker_year" @change="onYear" v-model="year" type="year"></el-date-picker>
      </div>
  </div>
</template>

<script>
export default {
  name: "datePicker",
  props: {
    startEndTime: {
        type: Boolean,
        default:false
    }
  },
  data(){
    return {
      active: null,
      date: [],
      day: '',
      month: '',
      year: '',
    }
  },
  methods:{
    onDate(){
      this.day = '';
      this.month = '';
      this.year = '';
      this.active = null;
      this.$emit('onFilter', {key:4, val:this.date || []});
    },
    onDay(){
      this.date = [];
      this.month = '';
      this.year = '';
      this.$emit('onFilter', {key:1, val:this.day});
    },
    onMonth(){
      this.date = [];
      this.day = '';
      this.year = '';
      this.$emit('onFilter', {key:2, val:this.month});
    },
    onYear(){
      this.date = [];
      this.month = '';
      this.day = '';
      this.$emit('onFilter', {key:3, val:this.year});
    },
    filter(n){
      if(n == this.active && n == 0) return false;
      this.active = n;
      switch (this.active) {
        case 0:
          this.date = [];
          this.$emit('onFilter', {key:0, val:''});
          break;
        case 1:
          this.$refs.date_picker_day.focus();
          break;
        case 2:
          this.$refs.date_picker_month.focus();
          break;
        case 3:
          this.$refs.date_picker_year.focus();
          break;
      }
    },


  }
}
</script>

<style lang="css" scoped>
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.fffff{
  display: flex;
}
.fffff .buttons{
  margin-left: 20px;
  position: relative;
}
.buttons .date_picker{
  position: absolute;
  width: 20px;
  height: 32px;
  left: 0;
  top: 0;
  z-index: -9
}
/deep/ .el-input--prefix .el-input__inner{
  padding: 0
}
</style>
